<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/swiper.css">
  <script src="../js/jquery-1.10.1.min.js"></script>
</head>

<body>
  <!-- .wrap>(ul.swiperBar>li*4>img[src='../images/$.jpg'])+ul.dotBar>li*4 -->
  <div class="wrap w">
    <ul class="swiperBar cl">
      <li><img src="../images/1.jpg" alt=""></li>
      <li><img src="../images/2.jpg" alt=""></li>
      <li><img src="../images/3.jpg" alt=""></li>
      <li><img src="../images/4.jpg" alt=""></li>
    </ul>
    <ul class="dotBar">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<script>

  $(function () {
    var clientwidth = $(".wrap").width();
    console.log($("swiperBar"));
    $(".swiperBar").animate({ left: -clientwidth * 3 }, 1000);

    // $(".dotBar li").click(function () {

    //   var index = $(this).index();
    //   console.log(index);
    //   $(this).addClass("active").siblings().removeClass("active");
    //   $(".swiperBar").animate({ left: -clientwidth * index });



    // })
  })
</script>

</html>